---
import { getCollection } from 'astro:content'

import SearchInput from './SearchInput.astro'
import SearchResults from './SearchResults.astro'

interface Result {
  category: string
  emoji: string
  slug: string
  terms: string[]
  title: string
}

const collections: Result[] = (await getCollection('collection')).map(({ data }) => {
  return {
    category: data.category,
    emoji: data.emoji,
    slug: `/components/${data.category}/${data.slug}`,
    terms: data.terms,
    title: data.title,
  }
})

const posts: Result[] = (await getCollection('blog')).map(({ data }) => {
  return {
    category: '',
    emoji: data.emoji,
    slug: `/blog/${data.slug}`,
    terms: data.terms,
    title: data.title,
  }
})
---

<div class="relative hidden md:block">
  <SearchInput />
  <SearchResults collections={collections} posts={posts} />
</div>
